import React, { useState } from "react";
import { Layout, Button, Card } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined, CloseCircleOutlined } from "@ant-design/icons";
import UserAvatar from "./components/UserAvatar.tsx";
import Fullscreen from "./components/Fullscreen.tsx";
import LayoutMenu from "./components/Menu.tsx";
import LayoutBreadcrumb from "./components/Breadcrumb.tsx";
import LayoutMain from "./components/Main.tsx";
import LayoutTag from "./components/Tag.tsx";
import "./index.less";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { setTitle } from "@/store/modules/titleSlice.ts";

const { Sider } = Layout;
const tagStyle = {
  width: "100%",
  height: "40px",
  background: "#fff",
  border: "1px solid #f0f0f0",
  borderRadius: "4px",
  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
  display: "flex",
  alignItems: "center",
  justifyContent: "start",
};
const LayoutIndex: React.FC = () => {
  const [isCollapse, setIsCollapse] = useState(false);
  const title = useSelector((state: RootState) => state.title);
  // console.log(title);

  return (
    <section className="layout-index">
      <header className="header-content">
        <img className="header-logo" src="/src/assets/react.svg" alt="logo" />
        <h2 className="header-title">{title}</h2>
        {/* <Fullscreen></Fullscreen> */}
        <UserAvatar></UserAvatar>
      </header>

      <div className="layout-content">
        <Sider width={220} collapsed={isCollapse}>
          <LayoutMenu></LayoutMenu>
        </Sider>

        <main className="layout-main">
          <div className="breadcrumb-nav">
            <Button
              type="text"
              icon={isCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              style={{ fontSize: "16px" }}
              onClick={() => setIsCollapse(!isCollapse)}
            />
            <LayoutBreadcrumb></LayoutBreadcrumb>
            {/* <LayoutTag></LayoutTag> */}

            {/* <div style={tagStyle}>
            </div>
            <div style={{ ...tagStyle, width: "30px", display: "flex", justifyContent: "center" }}>
              <CloseCircleOutlined />
            </div> */}
          </div>
          <div className="main-content">
            <Card style={{ height: "100%" }}>
              <LayoutMain></LayoutMain>
            </Card>
          </div>
        </main>
      </div>
    </section>
  );
};

export default LayoutIndex;
